<template>

  <Card class="ll page-fill" style="height:900px">
    <div>贷款产品</div>
    <div id="middle">
      <v-form>
        <v-form-item label="产品类型:" labelWidth="200px">
          <v-select v-model="titleCase" :select-list="productList" @item-click="itemChange"></v-select>
        </v-form-item>
        <v-form-item label="版本号:" labelWidth="200px">
          <v-input class="versionNum" placeholder="" v-model="name" disabled/>
          <v-input class="versionNum" v-model="date" placeholder="" disabled/>
          <v-input class="versionNum" v-model="sequence" placeholder="" /></v-form-item>
        <v-form-item label="描述:" labelWidth="200px">
          <v-input></v-input>
        </v-form-item>
        <v-form-item label="渠道:" labelWidth="200px">
          <v-checkbox-group v-model="channelList" class="check">
            <v-checkbox v-for="item in channel" :key="item" :label="item">{{item}}</v-checkbox>
          </v-checkbox-group>
        </v-form-item>
        <v-form-item label="期限:" labelWidth="200px">
          <v-checkbox-group v-model="termList" class="check">
            <v-checkbox v-for="item in term" :key="item.value" :label="item.value">{{item.label}}</v-checkbox>
          </v-checkbox-group>
        </v-form-item>
        <v-form-item label="等级:" labelWidth="200px">
          <v-checkbox-group v-model="gradeList" class="check">
            <v-checkbox label="A">A</v-checkbox>
            <v-checkbox label="B">B</v-checkbox>
            <v-checkbox label="C">C</v-checkbox>
            <v-checkbox label="D">D</v-checkbox>
          </v-checkbox-group>
        </v-form-item>
        <v-form-item label="机构:" labelWidth="200px">
          <v-select v-model="institution" :select-list="institutionList"></v-select>
        </v-form-item>
        <v-form-item label="宽限日:" labelWidth="200px">
          <v-input></v-input>
        </v-form-item>
        <v-form-item label="计费周期:" labelWidth="200px">
          <v-select v-model="billingCycle" :select-list="billingCycleList"></v-select>
        </v-form-item>
        <v-form-item label="还款顺序:" labelWidth="200px">
          <v-select v-model="repaySeq" :select-list="repaySeqList"></v-select>
        </v-form-item>
        <v-form-item label="还款计算方式:" labelWidth="200px">
          <v-select v-model="amortMethod" :select-list="amortMethodList"></v-select>
        </v-form-item>
        <v-button class="bt" size="normal" type="primary" @on-click="conf">确认</v-button>
        <v-button size="normal" class="bt" type="primary" @on-click="reback()">返回</v-button>
      </v-form>
    </div>
  </Card>
</template>

<script>
import api from '@/api'
export default {
  data () {
    return {
      channelList: [],
      channel: [],
      termList: [],
      term: [],
      gradeList: [],
      titleCase: '',
      name: '',
      date: '',
      sequence: '',
      channelOne: '',
      institution: '',
      billingCycle: '',
      repaySeq: '',
      amortMethod: '',
      amortMethodList: [
        {
          value: '1',
          label: '方式1'
        }
      ],
      repaySeqList: [
        {
          value: 'a',
          label: '顺序1'
        }
      ],
      billingCycleList: [
        {
          value: '1',
          label: '一年'
        }
      ],
      institutionList: [
        {
          value: '1',
          label: '平安'
        },
        {
          value: '2',
          label: '交行'
        }
      ],
      productList: [
        {
          value: '1',
          label: '1111'
        },
        {
          value: '2',
          label: '2222'
        }
      ]
    }
  },
  created () {
    api.searchProduct({}).then(re => {
      var allData = re.data.data
      let tmp = []
      for (var i = 0; i < allData.length; i++) {
        tmp.push({
          value: allData[i].titleCase + '-' + allData[i].productType + '-' + allData[i].productTypeName,
          label: allData[i].productTypeName
        })
      }
      this.productList = tmp
    })
  },
  methods: {
    itemChange () {
      var vm = this
      var nowDate = new Date()
      var year = nowDate.getFullYear()
      var month =
        nowDate.getMonth() + 1 < 10
          ? '0' + (nowDate.getMonth() + 1)
          : nowDate.getMonth() + 1
      var day =
        nowDate.getDate() < 10 ? '0' + nowDate.getDate() : nowDate.getDate()
      var dateStr = year + '' + month + day
      vm.date = dateStr
      vm.sequence = '1'
      vm.name = vm.titleCase.split('-')[0]
      let tmp = []
      let channelTmp = []
      api
        .searchChannelAndTerm({ productType: vm.titleCase.split('-')[1] })
        .then(re => {
          for (let i = 0; i < re.data.data.termList.length; i++) {
            tmp.push({
              value: re.data.data.termList[i].term + '',
              label: re.data.data.termList[i].term + '期'
            })
          }
          for (let i = 0; i < re.data.data.channelList.length; i++) {
            if (re.data.data.channelList[i].channelCode === 103) {
              channelTmp.push('线上')
            } else if (re.data.data.channelList[i].channelCode === 101) {
              channelTmp.push('保险')
            } else if (re.data.data.channelList[i].channelCode === 102) {
              channelTmp.push('银行')
            }
          }
          vm.channel = channelTmp
          vm.term = tmp
        })
        .catch(er => { })
    },
    reback () {
      var vm = this
      vm.$router.push('dkcp')
    },
    conf () {
      var vm = this
      if (vm.titleCase === '') {
        this.$alert({ title: '提示', content: '产品类型不能为空' })
        return
      }
      if (vm.channelList.length === 0) {
        this.$alert({ title: '提示', content: '请选择渠道' })
        return
      }
      if (vm.termList.length === 0) {
        this.$alert({ title: '提示', content: '请选择期限' })
        return
      }
      if (vm.gradeList.length === 0) {
        this.$alert({ title: '提示', content: '请选择等级' })
        return
      }
      if (vm.institution === '') {
        this.$alert({ title: '提示', content: '请选择机构' })
        return
      }
      if (vm.billingCycle === '') {
        this.$alert({ title: '提示', content: '请选择计费周期' })
        return
      }
      if (vm.repaySeq === '') {
        this.$alert({ title: '提示', content: '请选择还款顺序' })
        return
      }
      if (vm.amortMethod === '') {
        this.$alert({ title: '提示', content: '请选择还款计算方式' })
        return
      }
      var param = {
        productTypeName: vm.titleCase.split('-')[2],
        productType: vm.titleCase.split('-')[1],
        productVersion: vm.name + '-' + vm.date + '-' + vm.sequence,
        channelList: vm.channelList,
        termList: vm.termList,
        gradeList: vm.gradeList,
        institution: vm.institution,
        billingCycle: vm.billingCycle,
        repaySeq: vm.repaySeq,
        amortMethod: vm.amortMethod
      }
      if (!confirm('确认生成版本小类?')) {
        return
      }
      api
        .generateVersion(param)
        .then(re => {
          if (re.data.code === 'success') {
            this.$alert({ title: '提示', content: re.data.data })
          } else if (re.data.code === 'error') {
            this.$alert({ title: '提示', content: re.data.data })
          }
        })
        .catch(er => { })
      //   vm.$router.push({ name: "dkcpdetail", params:{channelList:vm.channelList,termList:vm.termList,gradeList:vm.gradeList}});
    }
  }
}
</script>

<style lang="less">
.ll {
}
#middle {
  margin-top: 100px;
  margin-left: 636px;
  width: 1000px;
}
#middle .v-form-label {
  font-size: 15px;
}
#middle .versionNum {
  width: 80px;
}
#middle .channel {
  font-size: 12px;
}
.bt {
  margin: 10px 80px;
}
.check {
  display: inline-block;
}
</style>
